<template>
  <FormDlg :title="title" @hide="onHide" @show="onShow" @submit="onSubmit" ref="dlg" :disabled="errors.any()">
    <div :class="{'form-group':true,'has-error': errors.has('serial')}">
      <label for="share-node-serial" class="col-sm-4 control-label">设备编号
      </label>
      <div class="col-sm-7">
        <input type="text" class="form-control" readonly="readonly" id="share-node-serial" name="serial"
               :value="form.serial" data-vv-as="设备编号">
      </div>
    </div>
    <div :class="{'form-group':true,'has-error': errors.has('code')}">
      <label for="share-node-code" class="col-sm-4 control-label">节点编号
      </label>
      <div class="col-sm-7">
        <input type="text" class="form-control" readonly="readonly" id="share-node-code" name="code" :value="form.code"
               data-vv-as="通道编号">
      </div>
    </div>
    <div :class="{'form-group':true,'has-error': errors.has('name')}">
      <label for="share-node-name" class="col-sm-4 control-label">节点名称
      </label>
      <div class="col-sm-7">
        <input type="text" class="form-control" readonly="readonly" id="share-node-name" name="name" :value="form.name"
               data-vv-as="节点名称">
      </div>
    </div>
    <div :class="{'form-group':true,'has-error': errors.has('cascade_id')}">
      <label for="share-node-cascade-id" class="col-sm-4 control-label">上级平台
        <span class="text-red">*</span>
      </label>
      <div class="col-sm-7">
        <el-select filterable clearable remote :remote-method="loadCascade" :loading="bLoading"
                   v-model="form.cascade_id"
                   @change="changeCascade" @clear="clearCascade" ref="selectCascade"
                   id="share-node-cascade-id" name="cascade_id" data-vv-as="上级平台" v-validate="'required'"
                   placeholder="搜索" size="small" style="width:100%;">
          <el-option v-for="item in cascades" :key="item.ID" :label="renderCascadeName(item)" :value="item.ID">
          </el-option>
        </el-select>
      </div>
    </div>
    <div :class="{'form-group':true, 'has-error': errors.has('share')}">
      <label class="col-sm-4 control-label">操作类型
      </label>
      <div class="col-sm-7 checkbox">
        <el-radio style="margin-left:-19px;margin-top:-5px;" size="small" v-model="form.share" :label="true">共享
        </el-radio>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-radio style="margin-left:-19px;margin-top:-5px;" size="small" v-model="form.share" :label="false">取消共享
        </el-radio>
      </div>
    </div>
    <div :class="{'form-group':true, 'has-error': errors.has('subfetch')}">
      <label class="col-sm-4 control-label">其它选项
      </label>
      <div class="col-sm-7 checkbox">
        <el-checkbox style="margin-left:-19px;margin-top:-5px;" size="small" v-model.trim="form.subfetch"
                     name="subfetch">包含子节点
        </el-checkbox>
      </div>
    </div>
  </FormDlg>
</template>

<script>
import FormDlg from 'components/FormDlg.vue'
import $ from 'jquery'

export default {
  data() {
    return {
      bLoading: false,
      cascades: [],
      form: this.defForm(),
    }
  },
  components: {
    FormDlg
  },
  computed: {
    title() {
      if (this.form.share) {
        return "共享节点";
      } else {
        return "取消共享节点";
      }
    }
  },
  methods: {
    defForm() {
      return {
        serial: '',
        code: '',
        name: '',
        cascade_id: '',
        subfetch: true,
        share: true,
        share_all_channel: false,
      }
    },
    onHide() {
      this.form = this.defForm();
      this.bLoading = false;
      this.cascades = [];
      this.$emit("hide");
    },
    onShow() {
      this.errors.clear();
      this.$emit("show");
    },
    async onSubmit() {
      var ok = await this.$validator.validateAll();
      if (!ok) {
        var e = this.errors.items[0];
        this.$message({
          type: 'error',
          message: e.msg
        })
        $(`[name=${e.field}]`).focus();
        return;
      }
      if (this.form.share_all_channel && !this.form.share) {
        this.$message({
          type: 'error',
          message: '上级已被标记为全部共享'
        })
        return;
      }
      $.get(this.$baseUrl.http + '/api/v1/cascade/sharenode', {
        serial: this.form.serial,
        code: this.form.code,
        cascade_id: this.form.cascade_id,
        share: this.form.share,
        subfetch: this.form.subfetch,
      }).then(data => {
        this.$refs['dlg'].hide();
        this.$emit("submit");
      })
    },
    show(data) {
      this.errors.clear();
      if (data) {
        this.form.serial = data.serial;
        this.form.code = data.code;
        this.form.name = data.customName || data.name || data.code;
      }
      this.loadCascade();
      this.$nextTick(() => {
        this.$refs['dlg'].show();
      })
    },
    loadCascade(q) {
      this.bLoading = true;
      $.get(this.$baseUrl.http + "/api/v1/cascade/list", {
        q: q,
        limit: 10,
      }).then(data => {
        this.cascades = data.CascadeList || [];
      }).always(() => {
        this.bLoading = false;
      })
    },
    changeCascade(v) {
      if (!v) {
        this.form.cascade_id = '';
        this.form.share_all_channel = false;
      } else {
        this.form.cascade_id = v;
        for (var cas of this.cascades) {
          if (cas.ID == v) {
            this.form.share_all_channel = !!cas.ShareAllChannel;
            break;
          }
        }
      }
    },
    clearCascade() {
      this.form.cascade_id = '';
      this.loadCascade();
    },
    renderCascadeName(item) {
      var name = item.Name || item.Serial || item.ID;
      if (item.ShareAllChannel) {
        name += "(全部共享)"
      }
      return name;
    }
  }
}
</script>
